<template>
  <view>
    
 
 		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
 			<image class="avatar" :src="avatarUrl"></image>
 		</button>
    <view class="nickname">
      <text>昵称:</text><input type="nickname" class="weui-input" placeholder="请输入昵称" />
    </view>
 		
  </view>
</template>

<script>
  export default {
    data() {
      return {
        	avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
      }
    },
    methods: {
      	onChooseAvatar(e) {
      				this.avatarUrl = e.detail.avatarUrl
      			},
    }
  }
</script>

<style lang="scss">
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  /* border-radius: 8px; */
  margin-top: 40px;
  margin-bottom: 40px;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nickname{
  padding-top: 20rpx;
  /* line-height: 100rpx; */
  display: flex;
  /* height: 100rpx; */
  border-top: 1px solid #dfdfdf;
  text{
    margin-left: 50rpx;
  }
}
.weui-input{
  margin-left: 150rpx;
}
</style>
